<template>
    <view class="changePassword-container">
        <nav-bar title="更改密码"></nav-bar>
        <view class="changePassword-input">
            <view class="changePassword-input-box">
                <input
                    type="text"
                    placeholder="输入原密码"
                    placeholder-class="changePassword-input-placeholder"
                    v-model="form.prevPassword"
                />
            </view>
            <view class="changePassword-input-box">
                <input
                    type="password"
                    placeholder="输入新密码"
                    placeholder-class="changePassword-input-placeholder"
                    v-model="form.newPassword"
                />
            </view>
            <view class="changePassword-input-box">
                <input
                    type="password"
                    placeholder="重复新密码"
                    placeholder-class="changePassword-input-placeholder"
                    v-model="form.newPasswordConfirm"
                />
            </view>
        </view>
        <text class="changePassword-btn" @click="handleClick"> 确定 </text>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            form: {
                prevPassword: "",
                newPassword: "",
                newPasswordConfirm: "",
            },
        };
    },
    methods: {
        handleClick() {
            if (this.checkForm()) {
                this.changePasswordReq();
            }
        },
        changePasswordReq() {
            let that = this;
            let o = {};
            o.old_password = this.form.prevPassword;
            o.newPassword = this.form.newPassword;
            this.$u.post("edit_user_password", o).then(() => {
                that.$u.toast("修改成功");
                setTimeout(() => {
                    that.toSetting();
                }, 500);
            });
        },
        checkForm() {
            if (!this.form.prevPassword) {
                this.$u.toast("请输入原密码");
                return false;
            } else if (!this.form.newPassword) {
                this.$u.toast("请输入新密码");
                return false;
            } else if (!this.form.newPasswordConfirm) {
                this.$u.toast("请输入重复新密码");
                return false;
            } else if (this.form.newPassword != this.form.newPasswordConfirm) {
                this.$u.toast("两次密码不一致");
                return false;
            }
            return true;
        },
        toSetting() {
            uni.navigateTo({
                url: "/pages/setting/setting",
            });
        },
    },
};
</script>

<style scoped>
page {
    background-color: rgb(253, 253, 240);
}
.changePassword-container {
    width: 100%;
    box-sizing: border-box;
    padding: 80rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.changePassword-title {
    display: flex;
    justify-content: center;
    margin-top: 180rpx;
}
.changePassword-title-btn {
    margin: 0 60rpx;
    padding: 10rpx 10rpx;
    font-size: 32rpx;
}
.changePassword-title-btn-active {
    border-bottom: 8rpx solid #e46c0b;
}
.changePassword-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100rpx;
    padding: 20rpx;
}
.changePassword-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40rpx;
    padding-bottom: 20rpx;
}
.changePassword-input-box input {
    background-color: rgb(250, 247, 250);
    padding: 40rpx;
    border-radius: 80rpx;
    border: 2rpx solid rgb(51, 204, 0);
}
.changePassword-input-placeholder {
    font-size: 32rpx;
}
.changePassword-input-forget {
    width: 100%;
    text-align: end;
    margin-top: 20rpx;
    padding-right: 20rpx;
}
.changePassword-btn {
    width: 100%;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-top: 80rpx;
    padding: 30rpx 40rpx;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 80rpx;
    font-size: 40rpx;
    color: #fff;
}
</style>
